<template>
	<view class="content-inner">
		<div class="content-top">
			<div class="content-time">
				<p class="time">{{$t('接单时间')}}：{{ allInfo.create_at || allInfo.store_quotation.create_at || '' }} </p>
				<p class="kind">{{ allInfo.delivery.goods_type == 0 ? $t('大件') : $t('小件') }} - {{ demandValue || '' }} </p>
			</div>
			<div v-if="allInfo.delivery.demand.split(',').includes('1')" class="colorSty between"
				style="align-items: flex-start;">
				<div class="beginDiv">
					<p class="w-full" style="text-align: center;">
						<span class="begin-name">{{ get(allInfo, "delivery.departure.area_info.name") || '' }}</span>
					</p>
					<view class="flex-start mt-10">
						<flag class="begin-logo mr-8" :country="get(allInfo, 'delivery.departure.area_info.country')" />
						<p class="time">{{ get(allInfo, "delivery.departure.area_info.mergename") || '' }} </p>
					</view>
				</div>
				<div class="px-20 mt-20">
					<p v-if="allInfo.delivery.transfer_count !== 0" class="begin-way">
						{{$t('途径')}}{{ allInfo.delivery.transfer_count }}</p>
					<image class="begin-arrow" src="/static/pic/Vector 1032.png" mode="widthFix" style="width: 100rpx;">
					</image>
				</div>
				<div class="endDiv">
					<p class="w-full" style="text-align: center;">
						<span class="end-name">{{ get(allInfo, "delivery.reach.area_info.name") || '' }}</span>
					</p>
					<view class="flex-start mt-10">
						<flag class="begin-logo mr-8" :country="get(allInfo, 'delivery.reach.area_info.country')" />
						<p class="kind">{{ get(allInfo, "delivery.reach.area_info.mergename") || '' }}</p>
					</view>
				</div>
			</div>
			<div v-else>
				<div class="content-top px-23">
					<div class="between py-20" v-for="item in allInfo.delivery.demand_area">
						<div class="fz26 text-111">
							{{ demandList[item.demand] }}
						</div>
						<div class="fz22 flex color-666">
							<flag class="ico w-30 mr-8 mt-3" :country="get(item, 'area_info.country')" />
							<div>{{ get(item, "area_info.mergename") }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<ul class="content-info">
			<li class="info">
				<p class="info-title">{{$t('货物信息')}}</p>
				<p class="info-content">{{ [get(allInfo, "delivery.goods_info.title"), get(allInfo,
					"delivery.goods_info.goods_weight") + (allInfo.delivery.goods_type == 1 ? 'kg' : '吨'), get(allInfo, "delivery.goods_info.goods_volume") + '立方米',
				get(allInfo, "delivery.goods_info.package.title")].filter(item => item).join('/') || '' }}</p>
			</li>
			<li class="info2">
				<p class="info-title lh-48">{{$t('业务需求')}}</p>
				<p>
					<BusiRequire v-if="allInfo.delivery.goods_type == 0"
						:requireInfo="(allInfo.delivery && allInfo.delivery.demand)" :isLoad="allInfo.delivery.is_load" :isStock="allInfo.delivery.is_stock" />
					<BusiRequire v-else requireInfo="1,2,3,4,5,6" />
				</p>
			</li>
			<li class="info2">
				<p class="info-title">{{$t('运输方式')}}</p>
				<p class="info-content">{{ transportList.filter(item => item.key ==
					allInfo.delivery.transport_way)[0].value || '' }}
					-
					{{ allInfo.delivery.transport_type == 1 ? $t('整车') : $t('散货') }}
					<span v-if="get(allInfo, 'delivery.vehicle_info.title')"> - {{ get(allInfo,
						"delivery.vehicle_info.title") }}</span>
				</p>
			</li>
			<li v-if="keyValue == '4'">
				<view v-if="allInfo.delivery.attach.after_sales_time == null" class="info2">
					<p class="info-title">{{$t('结算金额')}}</p>
					<p class="info-moeny">
						{{ currencyUtils.getSymboleByCode(get(allInfo, "store_quotation.price_unit")) }}
						{{ get(allInfo, "attach.handle_money") || get(allInfo, "store_quotation.price") || '' }}</p>
				</view>
			</li>
			<li v-else-if="keyValue == '5'" class="info2">
			</li>
			<li v-else class="info2">
				<p class="info-title">{{$t('货主出价')}}</p>
				<p class="info-moeny">
					{{ currencyUtils.getSymboleByCode(allInfo.price_unit) }}
					{{ get(allInfo, "delivery.price") || '' }}</p>
			</li>
			
			<!-- <li v-if="keyValue == '4' || keyValue == '5'" class="info2">
				<p class="info-title">{{$t('结算金额')}}</p>
				<p class="info-moeny">{{ currencyUtils.getSymboleByCode(get(allInfo, "delivery.price_unit")) }} {{
					get(allInfo, "attach.handle_money") || get(allInfo, "store_quotation.price") || ''
					}}
				</p>
			</li>
			<li v-else class="info2">
				<p class="info-title">{{$t('货主出价')}}</p>
				<p class="info-moeny">{{ currencyUtils.getSymboleByCode(get(allInfo, "delivery.price_unit")) }} {{
					get(allInfo, "delivery.price") || ''
					}}
				</p>
			</li> -->
			<!-- <li v-if="keyValue == '4'" class="info2">
				<p class="info-title">{{$t('平台介入')}}</p>
				<div class="flex-start">
					<image class="w-26 h-26 mt-2" src="/static/icon/warning.png"></image>
					<p class="newInfo">{{$t('新消息')}}</p>
				</div>
			</li>
			<li v-if="keyValue == '4'" class="info2">
				<p class="info-title">{{$t('客户反馈')}}</p>
				<div class="flex-start">
					<image class="w-26 h-26 mt-2" src="/static/icon/warning.png"></image>
					<p class="newInfo">{{$t('新消息')}}</p>
				</div>
			</li> -->
		</ul>
		<view v-if="keyValue == '0'" class="priceBox">
			<p>{{$t('当前报价排名')}}No.{{ allInfo.price_rank }}</p>
			<p>{{$t('当前时效排名')}}No.{{ allInfo.validity_rank }}</p>
			<p>{{$t('当前综合排名')}}No.{{ allInfo.synthesis_rank }}</p>
		</view>
		<view class="footer">
			<div>
				<!-- <div v-if="keyValue == '0'" class="footer-record between mb-20 px-20">
					<p>
						<span class="">{{$t('当前报价')}}:</span>
						<span class="record-num">{{ allInfo.price_unit }}{{ allInfo.price }}</span>
					</p>
					<p>
						<span class="">{{$t('当前时效')}}:</span>
						<span class="record-num">10{{$t('天')}}</span>
					</p>
				</div> -->
				<div v-if="keyValue == '5'" class="flex-start w-100" @click="goToHanding">
					<image class="warning-logo mt-3" src="/static/icon/error.png"></image>
					<p class="statusSty">{{$t('售后')}}</p>
				</div>
			</div>
			<div class="between w-full" style="gap:30rpx">
				<p v-if="allInfo.delivery.attach.after_sales_time != null && keyValue == 4" class="text-888 fz24 mr-15 mt-10" @click="gotoHand">{{$t('售后记录')}}</p>
				<div class="footer-btn center text-white flex-1 flex-shrink-0" @click="goDetailInfo">{{$t('订单详情')}}</div>
				<div v-if="keyValue == 1" class="footer-btnAmall flex-1 flex-shrink-0" @click="changePrice">
					<p>{{$t('我的报价')}}</p>
				</div>
				<!-- <div v-if="keyValue == 4 || keyValue == 3" class="footer-btn flex-1 flex-shrink-0" @click="goDetail">
					<p>{{$t('售后处理')}}</p>
				</div> -->
				<div v-if="keyValue == 3" class="footer-btn center text-white  flex-1 flex-shrink-0"
					@click="gotransform">{{$t('更新运踪')}}</div>
				<div v-if="keyValue == 2" class="footer-btn flex-1 flex-shrink-0" @click="gotransform">
					<p>{{$t('开始运输')}}</p>
				</div>

			</div>


		</view>



	</view>
</template>

<script>
import BusiRequire from './busiRequire.vue'
import EmployeeList from "../../employeeList/employeeList"
import currencyUtils from '@/utils/currency.js'
export default {
	components: {
		BusiRequire, EmployeeList
	},
	props: {
		allInfo: {},
		keyValue: ''
	},
	data() {
		return {
			transportList: [
				{
					key: '0',
					value: this.$t('不限')
				},
				{
					key: '1',
					value: '其他 '
				},
				{
					key: '2',
					value: this.$t('汽运')
				},
				{
					key: '3',
					value: this.$t('空运')
				},
				{
					key: '4',
					value: this.$t('海运')
				},
				{
					key: '5',
					value: this.$t('铁路')
				},
			],
			demandList: {
				1: this.$t('运输'),
				2: this.$t('报关'),
				3: this.$t('转关'),
				4: this.$t('清关'),
			},
			demandValue: "",
			requireList: [
				{
					src: '/static/icon/car.png',
					key: 0
				},
				{
					src: '/static/icon/excavator.png',
					key: 1
				},
				{
					src: '/static/icon/twoWay.png',
					key: 2
				},
				{
					src: '/static/icon/seal.png',
					key: 3
				},
				{
					src: '/static/icon/home.png',
					key: 4
				},
				{
					src: '/static/icon/cart.png',
					key: 5
				}
			]
		}
	},
	created() {
		if ((this.$props.allInfo.delivery.demand).split(",").length == 4) {
			this.demandValue = this.$t('运输、通关')
		} else {
			this.demandValue = (this.$props.allInfo.delivery.demand).split(",").map(item => this.demandList[item]).join("、")
		}
		// 使用 console.log 输出带有颜色和标题的信息
		// this.slog(this.allInfo)
	},
	mounted() {
	},
	methods: {
		gotransform() {
			if (this.allInfo.yuntrace == 1) {
				uni.navigateTo({
					url: "/pages/orderDynamics/orderDynamics?id=" + this.allInfo.delivery_id,
					success: () => {
						uni.hideLoading()
					}
				});
			} else {
				this.$emit('selectUser', this.allInfo.delivery_id)
				// uni.$u.toast('敬请期待!')
			}
		},
		changePrice() {
			this.$emit('readQuotition', this.allInfo.delivery_id, this.allInfo.price_unit)
		},
		goDetailInfo() {
			uni.navigateTo({
				url: "/pages/shipmentRecord/sourceDeatil?transformKey=true&item=" + JSON.stringify(this.allInfo.delivery)
			})
		},
		goToHanding() {
			uni.navigateTo({
				url: "/pages/shipmentRecord/handlingSituation?key=store&item=" + JSON.stringify(this.allInfo.delivery)
			})
		},
		gotoHand() {
			uni.navigateTo({
				url: "/pages/shipmentRecord/handlingSituation?key=store&item=" + JSON.stringify(this.allInfo.delivery)
			})
		},
		goDetail() {
			uni.navigateTo({
				url: "/pages/freightOrder/afterSaleFreight?item=" + JSON.stringify(this.allInfo.delivery)
			})
			// if (this.$props.allInfo.btnAble === 'toCommon') {
			// 	uni.navigateTo({ 
			// 		url:"/pages/sourceInformation/sourceDeatil"
			// 	})
			// } else if (this.$props.allInfo.btnAble === 'toServce') {
			// 	uni.navigateTo({
			// 		url:"/pages/freightOrder/afterSaleFreight"
			// 	})
			// } else if (this.$props.allInfo.btnAble === 'toSmall') {
			// 	uni.navigateTo({
			// 		url:"/pages/sourceInformation/sourceDeatilServiceSmall"
			// 	})
			// }
		},
		goFeedBack() {
			uni.navigateTo({
				url: "/pages/shipmentRecord/afterSalesFeedback"
			})
		}
	}
}
</script>

<style lang="less">
p {
	margin: 0;
	padding: 0;
}

.colorSty {
	margin-top: 30rpx;
	margin-left: 16rpx;
	margin-right: 16rpx;
	padding-bottom: 30rpx;

	.beginDiv {
		display: flex;
		flex-direction: column;
		align-items: end;
		width: 50%;
	}

	.endDiv {
		width: 50%;
	}

	.begin-name {
		font-size: 27rpx;
		margin-left: 8rpx;
		font-weight: 600;
		text-align: right;
	}

	.end-name {
		font-size: 27rpx;
		margin-left: 8rpx;
		font-weight: 600;
	}

	.begin-logo {
		width: 28rpx;
		height: 16rpx;
		margin-top: 7rpx;
	}

	.begin-arrow {
		width: 174rpx;
		height: 12rpx;
	}

	.begin-way {
		font-size: 26rpx;
		line-height: 0;
		color: #278AFF;
		font-weight: 500;
		text-align: center;
		// margin-top: 20rpx;
	}

	.time {
		color: #666666;
		font-size: 22rpx;
		margin-left: 6rpx;
	}

	.kind {
		color: #666666;
		font-size: 22rpx;
		margin-left: 6rpx;
	}
}

.content-inner {
	width: 702rpx;
	height: 100%;
	margin: 0 auto;
	margin-top: 18rpx;
	border-radius: 26rpx;
	background-color: #fff;
	overflow: hidden;

	.content-info {
		width: 95%;
		padding-left: 0;
		margin-top: 15rpx;
		margin: 15rpx auto;

		.info2 {
			margin-top: 38rpx;
			display: flex;
			justify-content: space-between;

			.logo {
				width: 44rpx;
				height: 44rpx;
				margin-left: 20rpx;
				margin-top: 0;
				vertical-align: middle;
			}

			.info-title {
				color: #535353;
				font-size: 26rpx;
				font-weight: 400;
			}

			.info-content {
				color: #333333;
				font-weight: 600;
				font-size: 26rpx;
			}

			.info-moeny {
				color: #F53F3F;
				font-weight: 600;
				font-size: 28rpx;
			}

			.newInfo {
				color: #FF811E;
				font-family: "PingFang SC";
				font-size: 26rpx;
				font-style: normal;
				font-weight: 500;
				line-height: 26rpx;
				/* 100% */
				margin-left: 14rpx;
			}
		}

		.info {
			display: flex;
			justify-content: space-between;
			margin-top: 24rpx;

			.logo {
				width: 44rpx;
				height: 44rpx;
				margin-left: 20rpx;
				margin-top: 0;
				vertical-align: middle;
			}

			.info-title {
				color: #535353;
				font-size: 26rpx;
				font-weight: 400;
			}

			.info-content {
				color: #333333;
				font-weight: 600;
				font-size: 26rpx;
			}

			.info-moeny {
				color: #F53F3F;
				font-weight: 600;
				font-size: 28rpx;
			}
		}
	}
}

.border-line {
	width: 96%;
	height: 1rpx;
	margin-top: 35rpx;
	margin: 0 auto;
	background-color: #F0F0F0;
}

.content-top {
	width: 670rpx;
	min-height: 100rpx;
	border-radius: 18rpx;
	background-color: #EDFAFF;
	margin: 0 auto;
	margin-top: 16rpx;
}

.content-time {
	display: flex;
	justify-content: space-between;
	margin-left: 10px;
	margin-right: 10px;

	.time {
		color: #535353;
		font-size: 24rpx;
		margin-top: 25rpx;
	}

	.kind {
		color: #333333;
		font-size: 24rpx;
		margin-top: 25rpx;
	}
}

.content-line {
	display: flex;
	justify-content: space-between;
	margin-left: 10px;
	margin-right: 10px;

	.begin {
		margin-top: 28rpx;

		.begin-logo {
			width: 48rpx;
			height: 34rpx;
			vertical-align: middle;
		}

		.begin-name {
			font-size: 27rpx;
			margin-left: 8rpx;
			font-weight: 600;
		}
	}

	.begin-arrow {
		width: 174rpx;
		height: 12rpx;
		/* margin-top: -15rpx; */
	}

	.begin-way {
		font-size: 26rpx;
		line-height: 0;
		color: #278AFF;
		font-weight: 500;
		text-align: center;
		margin-top: 38rpx;
	}
}

.content-city {
	display: flex;
	justify-content: space-between;
	margin-left: 10px;
	margin-right: 10px;

	.time {
		color: #666666;
		font-size: 22rpx;
		margin-top: 28rpx;
	}

	.kind {
		color: #666666;
		font-size: 22rpx;
		margin-top: 28rpx;
	}
}

.priceBox {
	width: 96%;
	height: 60rpx;
	flex-shrink: 0;
	border-radius: 500rpx;
	background: #EDFAFF;
	margin: 28rpx auto 0;
	display: flex;
	justify-content: space-around;
	align-items: center;

	p {
		color: #278AFF;
		font-family: "PingFang SC";
		font-size: 20rpx;
		font-style: normal;
		font-weight: 500;
	}
}

.footer {
	width: 93%;
	padding-bottom: 16rpx;
	margin: 26rpx auto 0;
	display:flex;
	justify-content: space-between;
	align-items:center;
	.footer-record {
		display: flex;

		// margin-top: 26rpx;
		p {
			span {
				color: #8C8C8C;
				font-family: "PingFang SC";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 500;
				line-height: 22rpx;
				/* 100% */
			}
		}

		.footer-logo {
			width: 26rpx;
			height: 24rpx;
			vertical-align: middle;
		}

		.record-num {
			font-size: 22rpx;
			color: #8C8C8C;
			margin-left: 9rpx;
			margin-top: 18rpx;
		}

		.footer-module {
			margin-left: 28rpx;
		}
	}

	.footer-btnAmall {
		width: 322rpx;
		height: 68rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 68rpx;
		/* 92.857% */
		text-align: center;
		margin-top: 8rpx;
	}

	.footer-btn {
		width: 100%;
		height: 68rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);

		p {
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 68rpx;
			/* 92.857% */
			text-align: center;
		}
	}

	.warning-logo {
		width: 28rpx;
		height: 28rpx;
		flex-shrink: 0;
	}
}

.statusSty {
	color: #F53F3F;
	font-family: "PingFang SC";
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	margin-left: 8rpx;
}

.saleSty {
	font-size: 24rpx;
	line-height: 70rpx;
	margin-top: 10rpx;
	color: #F53F3F;
}
</style>
